import React,{useState,useEffect} from 'react'
/* 
    如果组件中要用到仓库中的数据，如下
    1.导入store对象
    2.从store仓库中获取数据是通过:store.getState()
*/
import store from '../../redux/store'
import {incrementAction,decreaseAction} from '../../redux/action'
export default function Counter() {
  let [n,setN]=useState(0)
  console.log('store',store);
  const increment=()=>{
    /* 
      
     一、如果在组件中要更改状态机仓库中的数据，则必须如下流程
      1.调用store对象的disptch方法，来通过仓库组件要求仓库干什么
      2.仓库不会干什么，仓库只是存共享数据的，如果要改仓库中的数据，组件不能改，只有reducer才能改
      3.reducer可以对仓库中的数据做什么多改变，比如果增加，比如果减少.....,但是reducer能改，但不知道
        怎么改，怎么改由组件来决定，但组件改不成，组件给reducer发一个通知，告诉reducer，我们本次更改的类型
        reuducer根据组件发的那个类型，来具体执行相应的操作
      4.action中的type属性就是个通知类型
     二、组件上如果要立即实时获取仓库中的数据如下流程
     1.通过
    */
    store.dispatch(incrementAction)
    console.log(store.getState());

  }
  const decrease=()=>{
    store.dispatch(decreaseAction)
  }
  useEffect(()=>{
    //订阅方法
    store.subscribe(()=>{
        setN(Math.random())
    })
  })
  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
        <button onClick={()=>{decrease()}}>-</button>
    </div> 
  )
}
